import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import classnames from 'classnames'
import { DropOption } from 'components'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import styles from './List.less'

const confirm = Modal.confirm

const List = ({ onDeleteItem, onEditItem, location, onAdd, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const handleMenuClick = (record, e) => {
    switch (e.key) {
      case '1':
        onEditItem(record)
        break
      case '3':
        confirm({
          title: 'Are you sure delete this record?',
          onOk () {
            onDeleteItem(record.id)
          },
        })
        break
      case '2':
        onAdd(record)
        break
      default:
        break
    }
    // if (e.key === '1') {
    //   onEditItem(record)
    // } else if (e.key === '2') {
    //   confirm({
    //     title: 'Are you sure delete this record?',
    //     onOk () {
    //       onDeleteItem(record.id)
    //     },
    //   })
    // }
  }

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  const columns = [
    {
      title: 'MENUNAME',
      dataIndex: 'MENU_NAME',
      key: 'MENU_NAME',
      render: (text, record) => <Link to={`user/${record.ID}`}>{text}</Link>,
    }, {
      title: 'MENU_URL',
      dataIndex: 'MENU_URL',
      key: 'MENU_URL',
    },  {
      title: 'Operation',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: 'Update' }, { key: '2', name: 'AddSub' }, { key: '3', name: 'Delete' }]} />
      },
    },
  ]


  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}

        scroll={{ x: 700 }}
        columns={columns}
        rowSelection={rowSelection}
        rowKey={record => record.ID}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  onAdd: PropTypes.func,
  location: PropTypes.object,
}

export default List
